﻿

require.config({
    paths: {
        echarts: '~/Scripts/echarts/echarts',
        'echarts/chart/line': '~/Scripts/echarts/echarts',
        'echarts/chart/bar': '~/Scripts/echarts/echarts',
        'echarts/chart/scatter': '~/Scripts/echarts/echarts',
        'echarts/chart/k': '~/Scripts/echarts/echarts',
        'echarts/chart/pie': '~/Scripts/echarts/echarts',
        'echarts/chart/radar': '~/Scripts/echarts/echarts',
        'echarts/chart/chord': '~/Scripts/echarts/echarts',
        'echarts/chart/force': '~/Scripts/echarts/echarts'
    }
});
require(
           ['echarts',
            'echarts/chart/line',
            'echarts/chart/bar',
            'echarts/chart/scatter',
            'echarts/chart/k',
            'echarts/chart/pie',
            'echarts/chart/radar',
            'echarts/chart/force',
            'echarts/chart/chord'],

    function (ec) {
        echarts = ec;

        setTimeout(function () {
            //loadReport_month();
            loadReport_lmttype();
            loadReport_lmtunit();
        }, 50)
    }
);

//function refreshTheme() {
//    myChart.hideLoading();
//    myChart.setTheme(curTheme);
//}

$(document).ready(function () {
    ////Chart风格
    //$(".charttheme").click(function () {
    //    var theme = $(this).attr("data-theme");
    //    $("#li_theme span").html($(this).html());

    //    eval("curTheme = " + theme + "Theme;")
    //    setTimeout(refreshTheme, 100);

    //    $.ajax({
    //        type: "post",
    //        url: rooturl + "Report/UpdateChartTheme",
    //        data: {
    //            id: id,
    //            data: theme
    //        }
    //    });
    //});

    //loadData();
    //refreshCharts();
});

function loadReport_lmttype() {
    //layer.load(2);

    $.ajax({
        type: "post",
        url: baseurl + "Home/GetLmtTypeStaticsData",
        success: function (data) {
            //关闭加载层
            layer.closeAll();

            var element = document.getElementById('lmt_lmttype_chart');
            var options = getChartPieOptions(data);
            reloadChart(element, options);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            //关闭加载层
            layer.closeAll();

            showError(xhr);
        }
    });
}

function loadReport_lmtunit() {
    //layer.load(2);

    $.ajax({
        type: "post",
        url: baseurl + "Home/GetLmtUnitStaticsData",
        success: function (data) {
            //关闭加载层
            layer.closeAll();

            var element = document.getElementById('lmt_lmtunit_chart');
            var options = getChartPieOptions(data);
            reloadChart(element, options);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            //关闭加载层
            layer.closeAll();

            showError(xhr);
        }
    });
}

function loadReport_month() {
    //layer.load(2);
    $.ajax({
        type: "post",
        url: baseurl + "Home/GetMonthStaticsData",
        success: function (data) {
            //关闭加载层
            layer.closeAll();

            var element = document.getElementById('month_chart');
            var options = getChartOptions(data);
            reloadChart(element, options);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            //关闭加载层
            layer.closeAll();

            showError(xhr);
        }
    });
}

function getChartOptions(sourcedata) {
    var chartOptions = {
        grid: {
            x: 50,
            y: 20,
            x2: 180,
            y2: 40
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            selectedMode: false,
            orient: "vertical",
            x: "right",
            y: 60,
            data: ["legend1"]
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: false },
                //dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                //restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                data: [""]
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name: 'series1',
                type: 'line',
                data: [11, 11, 15, 13, 12, 13, 10]
            }
        ]
    };

    var charttype = "line";//$("#charttype li.selected").find("a").attr("data-charttype");
    var bardirect = "vertical";//$("#charttype li.selected").find("a").attr("data-direct");
    var chartsubtype = "stack";//$("#chartsubtype li.selected").find("a").attr("data-chartsubtype");

    var xAxis = [{
        type: 'category',
        data: []
    }];
    var yAxis = [{
        type: 'value',
        axisLabel: {
            formatter: '{value}'
        }
    }];

    if (charttype == "line" && (chartsubtype == "stack" || chartsubtype == "tiled")) {
        xAxis[0].boundaryGap = false;
    } else {
        xAxis[0].boundaryGap = true;
    }

    chartOptions.legend.data = [];
    chartOptions.series = [];

    xAxis[0].data = [];

    //时间轴
    //console.log(sourcedata);
    xAxis[0].data = sourcedata["nx"].category;

    //数据
    $.each(sourcedata, function (index, itemdata) {

        var seriesdata = {
            name: itemdata.name,
            //barMaxWidth: 20,
            type: charttype,
            data: itemdata.data
        };
        if (chartsubtype == "tiled") {
            seriesdata.smooth = true;
            seriesdata.itemStyle = { normal: { areaStyle: { type: 'default' } } };
        } else if (chartsubtype == "stack") {
            seriesdata.stack = "总量";
            seriesdata.itemStyle = { normal: { areaStyle: { type: 'default' } } };
        }
        chartOptions.series.push(seriesdata);
        chartOptions.legend.data.push(itemdata.name);
    });

    if (bardirect == "horizontal") {
        chartOptions.grid.x = 150;
        chartOptions.grid.y2 = 40;
        chartOptions.xAxis = yAxis;
        chartOptions.yAxis = xAxis;

    } else {
        chartOptions.grid.x = 50;
        chartOptions.grid.y2 = 80;
        chartOptions.xAxis = xAxis;
        chartOptions.yAxis = yAxis;
    }

    return chartOptions;
}
function getChartPieOptions(sourcedata) {
    var pieoption = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            selectedMode: false,
            orient: 'vertical',
            x: 10,
            y: 10,
            data: []
        },
        toolbox: {
            show: true,
            feature: {
                restore: { show: false },
                saveAsImage: { show: true }
            }
        },
        calculable: true,
        series: [
            {
                type: 'pie',
                radius: '60%',
                center: ['60%', '50%'],
                data: [
                    { value: 335, name: '直接访问' },
                    { value: 310, name: '邮件营销' },
                    { value: 234, name: '联盟广告' },
                    { value: 135, name: '视频广告' },
                    { value: 1548, name: '搜索引擎' }
                ]
            }
        ]
    };

    //项目
    pieoption.legend.data = [];
    $.each(sourcedata, function (index, dataitem) {
        pieoption.legend.data.push(dataitem.name);
    });

    //数据
    pieoption.series[0].data = sourcedata;

    return pieoption;
}

function reloadChart(element, options) {
    var obj = myChart[element.id];
    if (obj && obj.dispose) {
        obj.dispose();
    }

    obj = echarts.init(element, macaronsTheme);
    myChart[element.id] = obj;

    $(window).resize(function () {
        obj.resize();
    });
    //window.onresize = obj.resize;

    obj.setOption(options);
    obj.restore();
    obj.resize();
}